<template>
  <el-container class="Group-lessons">
    <el-header>
      <div>
        <el-page-header @back="goBack">
          <template #content>
            <span class="text-large font-600 mr-3"> Title </span>
          </template>
        </el-page-header>
      </div>
    </el-header>
    <el-main>
      <div class="Group-lessons-main">
        <el-row class="lessons-padding input-flex">
          <el-input v-model="input2" class="w-50 m-2" placeholder="课程名称" />
          <el-select v-model="value" class="m-2" placeholder="请选择课程教练">
            <el-option
              v-for="item in coach.coachList"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
          <el-button type="primary" @click="searchFind">查询</el-button>
          <el-button class="button-text-color">
            <router-link to="/mainView/AddTrainer?flag=1">添加私教</router-link>
          </el-button>
        </el-row>
        <div class="lessons-padding">
          <el-table
            border
            ref="multipleTableRef"
            :data="state.tableData"
            style="width: 100%"
          >
            <el-table-column property="time" label="评价时间">
            </el-table-column>
            <el-table-column
              property="courseName"
              label="课程名称"
              width="120"
            />
            <el-table-column property="classTime" label="课时" />
            <el-table-column property="userName" label="会员" />
            <el-table-column property="coach" label="教练" />
            <el-table-column property="perception" label="训练感受" />
            <el-table-column property="service" label="教练服务" />
            <el-table-column property="appraise" label="评价内容" />
            <el-table-column property="imageUrl" label="照片" />
            <el-table-column property="isDisplay" label="是否显示" />
          </el-table>
        </div>
        <el-row class="lessons-padding">
          <el-col :span="18"></el-col>
          <el-col :span="6">
            <el-pagination
              small
              background
              :page-size="state1.pageSize"
              layout="prev, pager, next"
              :total="state1.total"
              :current-page="state1.page"
              class="mt-4"
              @current-change="handleCurrentChange"
          /></el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElTable } from "element-plus";
import {
  findPrivateCourse,
  findCoach,
  deletePrivateCourse,
  selectAppraise,
} from "../http/api";
import { ElMessage, ElMessageBox } from "element-plus";
import router from "../router/index";

const input2 = ref("");
const value = ref("");
// 表格列表
var state = reactive({ tableData: [] });
// 教练列表
var coach = reactive({ coachList: [] });
// 表格复选框
const multipleSelection = ref();
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
onMounted(() => {
  // 获取列表
  findCoachLesssons(state1.page, input2.value);
  // 获取所有教练
  findCoach().then((res) => {
    console.log(res);
    if (res.code == 0) {
      coach.coachList = res.data;
    }
  });
});
// 根据课程名称和教练查询
const searchFind = () => {
  // coach.coachList.forEach((el, index) => {
  //   if (el.name == value.value) {
  //     coachNameId = el.id;
  //   }
  // });
  state1.page = 1;
  findCoachLesssons(state1.page, input2.value);
};
// 分页
var state1 = reactive({
  pageSize: 3,
  page: 1,
  total: 0,
});
const handleCurrentChange = (val) => {
  state1.page = val;
  findCoachLesssons(state1.page, input2.value);
};
// 获取评价函数
const findCoachLesssons = (a, b) => {
  console.log(state1.pageSize);
  selectAppraise({
    limit: state1.pageSize,
    page: a,
    courseName: b,
  }).then((res) => {
    console.log(res);
    if (res.code == 0) {
      state.tableData = res.data;
      state1.total = res.count;
    }
    state.tableData.forEach((el) => {
      if (el.courseCoachId == 1) {
        el.courseCoachId = "banban";
      } else {
        el.courseCoachId = "班班9";
      }
    });
  });
};
</script>

<style scoped>
/* 标签头部 */
.el-header {
  background-color: #737373;
}
.Group-lessons {
  background-color: #f2f2f2;
  height: 100vh;
}
.Group-lessons-main {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 10px !important;
}
.lessons-padding {
  padding: 5px 15px;
}
/* 输入框 */
.input-flex {
  display: flex;
  /* & > .el-input {
    width: 180px !important;
  }
  & > .el-select {
    width: 180px !important;
    padding: 0 5px;
  } */
}
.input-flex > .el-input {
  width: 180px !important;
}
.input-flex > .el-select {
  width: 180px !important;
  padding: 0 5px;
}
.button-text-color a {
  color: black;
}
</style>
